<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="/js/layui/css/layui.css">
<link rel="stylesheet" href="/js/zTree/css/metroStyle/metroStyle.css">
<style type="text/css">
#ztreeDiv {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: rgba(142, 142, 142, 0.29);
	display: none;
}

#ztree {
	width: 300px;
	margin: 30px auto;
	font-size: 1.2em;
	background-color: white;
	min-height: 80%;
}
</style>
</head>
<body>
	<div class="layui-col-lg8 layui-col-lg-offset2" style="margin-top: 1%">
		<span
			style="font-size: 2em; margin: 30px auto; display: block; text-align: center">新增权限</span>
		<form class="layui-form layui-form-pane"
			style="width: 80%; margin-left: 10%;" lay-filter="registerForm">
			<div class="layui-form-item layui-form-text">
				<label class="layui-form-label">权限名称</label>
				<div class="layui-input-block">
					<input type="text" name="name" lay-verify="required"
						autocomplete="off" placeholder="权限名称" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item layui-form-text">
				<label class="layui-form-label">权限关键字</label>
				<div class="layui-input-block">
					<input type="text" name="keyword" lay-verify="required"
						autocomplete="off" placeholder="请输入权限URL" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item layui-form-text">
				<label class="layui-form-label">权限描述</label>
				<div class="layui-input-block">
					<input type="text" name="description" lay-verify="required"
						autocomplete="off" placeholder="请输入权限描述" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item layui-form-text">
				<label class="layui-form-label">父级权限</label>
				<div class="layui-input-block">
					<input type="text" readonly name="parentName"
						autocomplete="off" placeholder="请选择父级权限" class="layui-input">
					<input type="hidden" name="parentId">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block"
					style="text-align: center; margin-left: 0;">
					<a class="layui-btn" lay-submit="" lay-filter="formSubmit">提交</a>
				</div>
			</div>
		</form>
	</div>
	<div id="ztreeDiv">
		<ul id="ztree" class="ztree"></ul>
	</div>
</body>
<script type="text/javascript" src="/js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="/js/commentUtils.js"></script>
<script type="text/javascript" src="/js/layui/layui.js"></script>
<script type="text/javascript" src="/js/zTree/js/jquery.ztree.all.js"></script>
<script type="text/javascript">
	layui.use([ 'form' ], function() {
		var form = layui.form;
		var ztreeData, zTreeObj, setting = {
			view : {
				selectedMulti : false,
				fontCss : {
					'font-size' : "1.2em"
				}
			},
			check : {
				enable : false,
				chkboxType : {
					"Y" : "ps",
					"N" : "ps"
				}
			},
			data : {
				simpleData : {
					enable : false
				}
			},
			callback : {
				onClick : zTreeOnClick
			}
		};
		function zTreeOnClick(event, treeId, treeNode) {
			event.preventDefault();//阻止默认事件
			$("input[name='parentName']").val(treeNode.name);
			$("input[name='parentId']").val(treeNode.id);
			$("#ztreeDiv").hide();
			return false;
		}

		$("input[name='parentName']").on("click", function() {
			if (ztreeData) {
				zTreeObj = $.fn.zTree.init($("#ztree"), setting, ztreeData);
				$("#ztreeDiv").show();

			} else {
				$.get("/sys/permission/ztree", function(res) {
					var ztreeData = res.data;
					zTreeObj = $.fn.zTree.init($("#ztree"), setting, ztreeData);
					$("#ztreeDiv").show();
				});
			}
		});

		form.on('submit(formSubmit)', function(data) {
			var postData = data.field;
			utils.postUrl("/sys/permission", postData, function(res) {
				if (res.code == 0) {
					parent.layer.msg("添加成功!", function() {
						parent.layui.table.reload('permissionTab');
						parent.initztree();
						var index = parent.layer.getFrameIndex(window.name);
						parent.layer.close(index);
					});
				} else {
					parent.layer.msg(res.msg, {
						icon : 2,
						anim : 6
					});
				}
			});
			return false;
		});
	});
</script>
</html>